<template>
  <div id="licharts" style="height: 20vh;"></div>
</template>
<script>
import * as echarts from "echarts";
require("echarts"); // echarts theme
export default {
  name: "roseEchart",
  data() {
    return {
      chart: null,
      options: {},
      barData: [],
      lineData: [],
      category: []
    };
  },
  props: {
    listData: {
      type: Array,
      default: () => []
    },
    id: {
      type: String,
      default: ""
    }
  },
  watch: {
    listData: {
      handler(val, newVal) {
        this.initOptions(val);
        this.initCharts();
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    // this.getData();
    // this.inde();
  },
  mounted() {
    setTimeout(() => {
      this.initOptions(this.listData);
      this.initCharts();
    }, 1000);
  },
  methods: {
    initOptions() {
      // this.options = {
      //   xAxis: {
      //     type: "category",
      //     data: [
      //       "1月",
      //       "2月",
      //       "3月",
      //       "4月",
      //       "5月",
      //       "6月",
      //       "7月",
      //       "8月",
      //       "9月",
      //       "10月",
      //       "11月",
      //       "12月"
      //     ]
      //   },
      //   grid: {
      //     x: 50,
      //     y: 20
      //   },
      //   yAxis: {
      //     type: "value"
      //   },
      //   series: [
      //     {
      //       data: [
      //         820,
      //         932,
      //         901,
      //         934,
      //         1290,
      //         1330,
      //         1320,
      //         1233,
      //         1224,
      //         1323,
      //         1323,
      //         1233
      //       ],
      //       type: "line"
      //       // smooth: true、
      //     }
      //   ]
      // };
      this.options = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        toolbox: {
          // feature: {
          //   dataView: { show: true, readOnly: false },
          //   magicType: { show: true, type: ["line", "bar"] },
          //   restore: { show: true },
          //   saveAsImage: { show: true }
          // }
        },
        legend: {
          data: ["全区罚没金额", "片区罚没金额", "占比"]
        },
        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月"
            ],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "罚没金额",
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: "{value} 万元"
            }
          },
          {
            type: "value",
            name: "罚没占比",
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: "{value} %"
            }
          }
        ],
        series: [
          {
            name: "全区罚没金额",
            type: "bar",
            tooltip: {
              valueFormatter: function(value) {
                return value + " 万元";
              }
            },
            data: [
              2.0,
              4.9,
              7.0,
              23.2,
              25.6,
              76.7,
              135.6,
              162.2,
              32.6,
              20.0,
              6.4,
              3.3
            ]
          },
          {
            name: "片区罚没金额",
            type: "bar",
            tooltip: {
              valueFormatter: function(value) {
                return value + " 万元";
              }
            },
            data: [
              2.6,
              5.9,
              9.0,
              26.4,
              28.7,
              70.7,
              175.6,
              182.2,
              48.7,
              18.8,
              6.0,
              2.3
            ]
          },
          {
            name: "占比",
            type: "line",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function(value) {
                return value + " %";
              }
            },
            data: [
              2.0,
              2.2,
              3.3,
              4.5,
              6.3,
              10.2,
              20.3,
              23.4,
              23.0,
              16.5,
              12.0,
              6.2
            ]
          }
        ]
      };
    },
    initCharts() {
      this.chart = echarts.init(document.getElementById("licharts"));
      this.chart.setOption(this.options);
    }
  }
};
</script>
